<template>
  <view class="container">
    <!-- 左侧按钮区域 -->
    <view class="button-section">
      <button class="video-button" @click="toggleVideo('video1')">轮胎修理厂</button>
      <button class="video-button" @click="toggleVideo('video2')">生态矿区</button>
	   <button class="video-button" @click="toggleVideo('video3')">蒙泰利达</button>
    </view>
    <!-- 右侧视频区域 -->
    <view class="video-section">
      <video
        id="video1"
        :src="videoSrc1"
        controls
        autoplay
        muted
        v-if="isVideo1Visible"
        :volume="volumeLevel1"
      ></video>
      <video
        id="video2"
        :src="videoSrc2"
        controls
        autoplay
        muted
        v-if="isVideo2Visible"
        :volume="volumeLevel2"
      ></video>
	  <video
	    id="video3"
	    :src="videoSrc3"
	    controls
	    autoplay
	    muted
	    v-if="isVideo3Visible"
	    :volume="volumeLevel3"
	  ></video>
    </view>
  </view>
</template>

<script>
// 这里的JavaScript部分保持不变，因为主要是对样式进行美化
export default {
  data() {
    return {
      // 视频1相关状态
      videoContext1: null,
      videoSrc1: "http://8.130.81.246:8007/live/livestream1901.flv",
      volumeLevel1: 0.5,
      isVideo1Visible: false,
      // 视频2相关状态
      videoContext2: null,
      videoSrc2: "http://8.130.81.246:8007/live/livestream1902.flv",
      volumeLevel2: 0.5,
      isVideo2Visible: false,
	  // 视频3相关状态
	  videoContext3: null,
	  videoSrc3: "http://8.130.81.246:8007/live/livestream1903.flv",
	  volumeLevel3: 0.5,
	  isVideo3Visible: false
    };
  },
  methods: {
    toggleVideo(videoId) {
      // 根据传入的videoId来确定要操作的视频相关变量和操作
      if (videoId === 'video1') {
        this.isVideo1Visible = true;
        this.videoContext1 = uni.createVideoContext('video1', this);
        this.videoContext1.play();
      } else if (videoId === 'video2') {
        this.isVideo2Visible = true;
        this.videoContext2 = uni.createVideoContext('video2', this);
        this.videoContext2.play();
      }else if (videoId === 'video3') {
        this.isVideo3Visible = true;
        this.videoContext3 = uni.createVideoContext('video3', this);
        this.videoContext3.play();
      }
    }
  }
};
</script>

<style>
/* 整体容器样式 */
.container {
  display: flex;
  flex-direction: row;
  background-color: #f4f4f4; /* 浅灰色背景，使界面更柔和 */
  padding: 20px; /* 增加一些内边距，让内容不紧贴边缘 */
}

/* 左侧按钮区域样式 */
.button-section {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #eaeaea; /* 稍深一点的灰色，与整体背景区分开 */
  border-radius: 10px; /* 圆角效果，使按钮区域更圆润美观 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 淡淡的阴影，增加立体感 */
  padding: 15px; /* 内边距，让按钮有足够的空间 */
}

/* 按钮样式 */
.video-button {
  width: 80%;
  padding: 10px 0;
  background-color: #007aff; /* 蓝色按钮，比较醒目 */
  color: white; /* 白色文字，与蓝色按钮形成对比 */
  border: none;
  border-radius: 5px; /* 按钮的圆角效果 */
  cursor: pointer; /* 鼠标悬停时变为手型指针 */
  transition: background-color 0.3s ease; /* 按钮背景色过渡效果，增加交互感 */
}

.video-button:hover {
  background-color: #0056b3; /* 按钮悬停时的背景色变化，加深蓝色 */
}

/* 右侧视频区域样式 */
.video-section {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding-left: 20px; /* 与按钮区域增加一些间距 */
}

video {
  width: 45%;
  height: 300px;
  margin-bottom: 10px;
  border-radius: 5px; /* 视频的圆角效果，使其更美观 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 视频添加淡淡的阴影，增加立体感 */
}
</style>